<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字游戏</title>
</head>
<body>
    <P class="guesses"></P>
    <p class="lastResult"></p>
    <p class="lowOrHi"></p>
    <label for="guessField">请猜数：</label>
    <input type="text" id="guessField" class="guessField">
    <input type="submit" value="确定"  class="guessSubmit">

   <script>
      let randomNumber = Math.floor(Math.random() * 100) + 1; //定义变量 let
      const guesses = document.querySelector('.guesses');     //定义常量 const
      const lastResult = document.querySelector('.lastResult');
      const lowOrHi = document.querySelector('.lowOrHi');
      const guessSubmit = document.querySelector('.guessSubmit');
      /** @type */
      const guessField = document.querySelector('.guessField');
      let guessCount = 1;
      let resetButton;
      guessField.focus()

      function checkGuess() {
        let userGuess = Number(guessField.value);
        if (guessCount === 1) {
          guesses.textContent = '上次猜的数：';
        }

        guesses.textContent += userGuess + ' ';

        if (userGuess === randomNumber) {
          lastResult.textContent = '恭喜你！猜对了！';
          lastResult.style.backgroundColor = 'green';
          lowOrHi.textContent = '';
          setGameOver();
        } else if (guessCount === 10) {
          lastResult.textContent = '!!!游戏结束!!!';
          lowOrHi.textContent = '';
          setGameOver();
        } else {
          lastResult.textContent = '你猜错了！';
          lastResult.style.backgroundColor = 'red';
          if(userGuess < randomNumber) {
            lowOrHi.textContent = '你刚才猜低了！' ;
          } else if(userGuess > randomNumber) {
            lowOrHi.textContent = '你刚才猜高了！';
          }
        }

        guessCount++;
        guessField.value = '';
        guessField.focus();
      }

      guessSubmit.addEventListener('click', checkGuess); //事件

      function setGameOver() {
        guessField.disabled = true;
        guessSubmit.disabled = true;
        resetButton = document.createElement('button'); //创建按钮
        resetButton.textContent = '开始新游戏'; //设置文本
        document.body.appendChild(resetButton); //添加到document中
        resetButton.addEventListener('click', resetGame);//添加事件
      }

      function resetGame() {
        guessCount = 1;
        const resetParas = document.querySelectorAll('.resultParas p');
        for(let i = 0 ; i < resetParas.length ; i++) {
          resetParas[i].textContent = '';
        }

        resetButton.parentNode.removeChild(resetButton); //删除自己
        guessField.disabled = false;
        guessSubmit.disabled = false;
        guessField.value = '';
        guessField.focus();  //鼠标聚焦输入框

        lastResult.style.backgroundColor = 'white';

        randomNumber = Math.floor(Math.random() * 100) + 1;
      }
    </script> 
    <!-- <script>
        let randomNumber = Math.floor(Math.random()*100) + 1
        
        const guesses = document.querySelector('.guesses')
        
        const lastResult = document.querySelector('.lastResult')
        const lowOrHi = document.querySelector('.LowOrHi')
        const guessSubmit = document.querySelector('.guessSubmit')
        //常量来存储对 HTML 中的文本输入表单域的引用
        const guessField = document.querySelector('.guessField')

        let guessCount = 1
        let resetButton
        guessField.focus()

        function checkGuess() {
            let userGuess = Number(guessField.value)
            if(guessCount === 1){
                guesses.textContent = '上次猜的数：'
            }

            guesses.textContent +=userGuess + ' '
            
            if(userGuess === randomNumber){
                lastResult.textContent = '恭喜你！猜对了！'
                lastResult.style.backgroundColor = 'green'
                lowOrHi.textContent = ''
                setGameOver()
            }else if (guessCount === 10){
                lastResult.textContent = '!!!GAME OVER!!!'
                setGameOver()
            }else{
                lastResult.textContent = '你猜错了！'
                lastResult.style.backgroundColor = 'red'
                if(userGuess < randomNumber){
                    lowOrHi.textContent = '你猜低了！'
                }else if(userGuess > randomNumber){
                    lowOrHi.textContent = '你猜高了！'
                }
            }
            guessCount++
            guessField.value = ''
            guessField.focus()
        }
        guessSubmit.addEventListener('click',checkGuess)
        function setGameOver() {
            guessField.disabled = true
            guessS.disabled = true
            resetButton = document.createElement('button')
            resetButton.textContent = '开始新游戏'
            document.body.appendChild(resetButton)
            resetButton.addEventListener('click',resetGame)
        }
        function resetGame() {
            guessCount = 1

            const resetParas = document.querySelectorAll('.resultParas p')
            for (let i = 0; i < resetParas.length; i++){
                resetParas[i].textContent = ''
            }
            resetButton.parentNode.removeChild(resetButton)

            guessField.disabled = false
            guessSubmit.disabled = false
            guessField.value = ''
            guessField.focus()

            lastResult.style.backgroundColor = 'white'

            randomNumber = Math.floor(Math.random() * 100)+1
        }
    </script> -->

    
</body>
</html>